<template>
  <div class="attribute"> 
     <div class="tree">
      <el-input placeholder="按知识点搜索" prefix-icon="el-icon-search" clearable v-model="filterText" class="search-input" size="medium"/>
      <el-tree
        class="knowledge-tree"
        ref="knowledgeRef"
        :data="dateset"
        node-key="id"
        show-checkbox
        :props="{ children: 'childs', label: 'name', value: 'id' }"
        :filter-node-method="filterNode"
        :default-expanded-keys="defaultData"
        :default-checked-keys="defaultData"
        @check="nodeCheck"
        >
        <template #default="{ node }">
          <el-tooltip class="item" effect="light" placement="top" v-if="node.label.length > 9">
            <template #content>
              {{ node.label }}
            </template>
            <span class="el-tree-childs">
              <span>{{ node.label }}</span>
            </span>
          </el-tooltip>
          <span class="el-tree-childs" v-else>
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, Ref, watch, computed } from 'vue'
import $  from '$'
import { ElMessage } from 'element-plus'
import store from './../store/index'

export default {
  props: {},
  setup (props) {
    let loading = ref(true);
    let dateset: Ref<any[]> = ref([]);
    let defaultData = ref()
    const getSubjectHandle = (subjectId) => $.http.post('/admin/knowledgeElement/queryTree', { subjectId }).then(res => {
      dateset.value = res.json;
      loading.value = false;
    });
    let manageId = computed(() => store.state.manageId)
    const getDefaultData = () => { 
      $.http.post('/admin/knowledgeManagerElementRelation/query', { manageId: manageId.value }).then(res => {
        res.result && (defaultData.value = res.json.map((item) => { return item.knowledgeId}))
      });
    }
    setTimeout(() => {
      getDefaultData() 
    });
    $.emitter.emit('effect', getSubjectHandle)
       /* 搜索 */
    let filterText = ref(null);
    $.emitter.emit('effect', () => filterText.value = null)
    let knowledgeRef: Ref<any> = ref(null);
    const filterNode = (val, node) => (!val || node.name.includes(val));
    watch(filterText, $.debounce(() => knowledgeRef.value.filter(filterText.value) , 300))
    const nodeCheck = (target, { checkedNodes }) => {
      checkedNodes = checkedNodes.filter(p => p.childs === null)
      let knowledgeIds = checkedNodes.map(item => { return item.id})
      $.http.json('admin/knowledgeManagerElementRelation/batchSave',{ manageId: manageId.value, knowledgeIds })
    }
     return { filterText, filterNode, knowledgeRef, loading, nodeCheck, dateset, getDefaultData, manageId, defaultData };
  }
}
</script>
<style lang="scss" scoped>
  .attribute {
    padding: 0 10px;
    .tab {
      color: #1A2633;
    }
    .subject {
      .subject-span {
        color: #72b22a;
        margin-left: 22px;
      }
    }
    .chapter {
      margin-top: 20px;
    }
    .chapter-list {
      margin-top: 20px;
      .el-input-group {
        margin-bottom: 20px; 
      }
      :deep(.el-input-group__append) {
        cursor: pointer;
      }
    }
    .add-source {
      button {
        width: 100%;
        background: #F5F7FA;
        border-radius: 6px;
        border: 1px dashed #77808D;
      }
  }
  }
</style>